<form class="form-horizontal" #form="ngForm">
  <div class="form-group">
    <label class="col-sm-2 control-label">默认示例</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="默认示例"
             [(ngModel)]="default" name="default" #defaultBox="ngModel"
             greatByteLength="10"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">一个中文等于2个长度，最多10个长度！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="defaultBox.invalid && (defaultBox.dirty || defaultBox.touched)">
      {{defaultBox?.errors|json}}
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-2 control-label">默认示例2</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="默认示例2"
             [(ngModel)]="default2" name="default2" #default2Box="ngModel"
             greatByteLength="10"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">从校验结果中，取出错误消息！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="default2Box.invalid && (default2Box.dirty || default2Box.touched)">
      {{default2Box?.errors.pattern.errorMsg}}
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-2 control-label">默认示例3</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="默认示例3"
             [(ngModel)]="default3" name="default3" #default3Box="ngModel"
             greatByteLength="10"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">从校验结果中，拼接错误消息！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="default3Box.invalid && (default3Box.dirty || default3Box.touched)">
      {{default3Box?.errors.pattern.errorMsg + '最大允许长度为：'+default3Box?.errors.pattern.maxLength+ '，当前长度为：'+default3Box?.errors.pattern.actualLength}}
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-2 control-label">默认示例4</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="默认示例4"
             [(ngModel)]="default4" name="default4" #default4Box="ngModel"
             greatByteLength="10"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">从校验结果中，计算超出的长度！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="default4Box.invalid && (default4Box.dirty || default4Box.touched)">
      {{'本次输入已超长度为：'+(default4Box?.errors.pattern.actualLength-default4Box?.errors.pattern.maxLength)}}
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-2 control-label">fieldName示例</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder="fieldName示例"
             [(ngModel)]="fieldName" name="fieldName" #fieldNameBox="ngModel"
             greatByteLength="10" fieldName="name"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">一个中文等于2个长度，最多10个长度！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="fieldNameBox.invalid && (fieldNameBox.dirty || fieldNameBox.touched)">
      {{fieldNameBox?.errors|json}}
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-2 control-label">errorMsgKey示例</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder='errorMsgKey="errorMsgKey"'
             [(ngModel)]="errorMsgKey" name="errorMsgKey" #errorMsgKeyBox="ngModel"
             greatByteLength="10" errorMsgKey="errorMsgKey"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">一个中文等于2个长度，最多10个长度！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="errorMsgKeyBox.invalid && (errorMsgKeyBox.dirty || errorMsgKeyBox.touched)">
      {{errorMsgKeyBox?.errors|json}}
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-2 control-label">errorMsg示例</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" placeholder='errorMsg="最多5个中文或10个英文" '
             [(ngModel)]="errorMsg" name="errorMsg" #errorMsgBox="ngModel"
             greatByteLength="10" errorMsg="最多5个中文或10个英文"
      >
    </div>
    <div class="col-sm-4">
      <span class="help-block">一个中文等于2个长度，最多10个长度！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="errorMsgBox.invalid && (errorMsgBox.dirty || errorMsgBox.touched)">
      {{errorMsgBox?.errors|json}}
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" [disabled]="!form.form.valid">保 存</button>
    </div>
  </div>
</form>
